import React, { Fragment, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { Toast } from 'antd-mobile';

import { login } from '../../../api';
import MobileTone from './modal/mobileTone';
import AccountTone from './modal/accountTone';
import * as actionCreators from './store/actionCreators';
import { QQ, Weixin, ZhifuBao } from '../../../common/js/Options';

/**
 * 登录组件
 * @param {*} props 
 * @returns 
 */
const Login = props => {
    const navigate = useNavigate();

    // eslint-disable-next-line
    const { homeData, setData } = props;
    // eslint-disable-next-line
    const [ visible, setVisible ] = useState(false);
    // eslint-disable-next-line
    const [ password, setPassword ] = useState('');
    // true 表示手机号登录 false 账密登录
    // eslint-disable-next-line
    const [ loginTab, setLoginTab ] = useState(true);
    const [ validCode, setValidCode ] = useState('');
    const [ loginName, setLoginName ] = useState('');
    // 协议选择状态
    const [ ckboxTab, setCkboxTab ] = useState(false);

    useEffect(()=> {}, [ loginTab ]);

    // eslint-disable-next-line
    const doLogin = async () => {
        const params = {};
        params.password = password;
        params.loginName = loginName;
        params.validCode = validCode;

        setData(params);

        if(loginTab) {
            if(!loginName) {
                Toast.show({ content: '请输入手机号' });
                return;
            } else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(loginName))){
                Toast.show({ content: '请输入正确手机号' });
                return;
            }
            if (!validCode) {
                Toast.show({ content: '请输入短信验证码' });
                return;
            }

            if (validCode.length !== 6) {
                Toast.show({ content: '短信验证码不合法' });
                return;
            }

            if(!ckboxTab) {
                Toast.show({ content: '请先勾选协议' });
                return;
            }
        }
        else {
            if(!loginName) {
                Toast.show({ content: '请输入手机号/邮箱/用户名' });
                return;
            }
        }

        console.log('login-req->', params);
        const result = await login(params);
        if (result) {

        }
        
    }
    // eslint-disable-next-line
    const toGo = (link) => navigate(link);

    return (
        <Fragment>
            <div className='w-lay'>
                <div className='w-login'>
                    <div data-v2310001 className='w-close' onClick={()=> navigate(-1)}/>
                    <div data-v2310001='' className='w-header'>
                        <img style={{ width: '2.3rem', margin: '.2rem 0' }} 
                            src={require('../../../common/images/logo3.gif')} alt='logo'/>
                    </div>
                    {/* <div data-v2310001 className='w-login-title' style={{ display: 'none' }}>
                        <div style={{fontSize: '.25rem', fontWeight: 'bolder'}}>登录</div>
                        <div>
                            <span>还没有账号,</span>
                            <span className='w-login-swtab' onClick={()=> setLoginTab(!loginTab)}>
                                { loginTab ? '立即登录' : '立即注册' }
                            </span>
                        </div>
                    </div> */}
                    <div data-v2310001='' className='w-login-wrap'>
                        {/* 手机号登录 */
                            loginTab ? (
                                <MobileTone
                                    doLogin={doLogin}
                                    ckboxTab={ckboxTab} setCkboxTab={setCkboxTab}
                                    loginTab={loginTab} setLoginTab={setLoginTab}
                                    validCode={validCode} setValidCode={setValidCode}
                                    loginName={loginName} setLoginName={setLoginName}
                                />
                            ) : (
                                /* 用户名密码登录 */
                                <AccountTone
                                    doLogin={doLogin} toGo={toGo}
                                    ckboxTab={ckboxTab} setCkboxTab={setCkboxTab}
                                    loginTab={loginTab} setLoginTab={setLoginTab}
                                    password={password} setPassword={setPassword}
                                    loginName={loginName} setLoginName={setLoginName}
                                />
                            )
                        }
                        <div className='w-login-tab'>
                            <span children={loginTab ? '账密登录' : '免密登录'} onClick={()=> setLoginTab(!loginTab)}/>
                            <span children='快速注册'/>
                        </div>
                    </div>
                    
                    <div className='w-login-smart'>
                        <div className='w-login-three'>关联登录，请注意第三方用户隐私协议</div>
                        <div className='w-login-other'>
                            <a className='w-lother-li w-login-QQ' children={<QQ/>} href/>
                            <a className='w-lother-li w-login-WX' children={<Weixin/>} href/>
                            <a className='w-lother-li w-login-zfb' children={<ZhifuBao/>} href/>
                        </div>
                    </div>
                </div>
            </div>
            
        </Fragment>
    )
}

const state2Props = (state) => {
    return {
        homeData: state.getIn(['home', 'homeData']),
    }
}

// 将 store 的dispatch映射到 props
const stateToDispatch = (dispatch) => ({
    setData(data) {
        dispatch(actionCreators.setData(data))
    }
})

export default connect(state2Props, stateToDispatch)(Login);